<template>
    <div>
        <el-row :gutter="2">
            <el-col :span="5" v-for="item in condition" :key="item.field" class="c-col">
                <el-input :placeholder="item.placeholder" v-model="conditionData[item.field]">
                    <template slot="prepend">{{item.name}}</template>
                </el-input>
            </el-col>
            <el-col :span="9" style="text-align: left" class="c-col">
                <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
                <el-button type="primary" icon="el-icon-search" @click="advancedSearch">高级搜索</el-button>
                <el-button type="primary" icon="el-icon-search" @click="resetSearch">重置</el-button>
            </el-col>
        </el-row>
        <el-row v-show="false">
            <el-col :span="2" v-for="item in searchData" :key="item.field" class="c-col">
                <el-tag  type="success">{{item.value}}</el-tag>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    const defaultSearchParams = ["page", "rows"];

    export default {
        name: "el-search",
        props: {
            condition : Array,
            // condition: [{name : "cc", field : "aa", placeholder: "bb", type : "",}],
        },
        data() {
            return {
                childCondition : this.condition,
                conditionData: {

                },
                searchData: []
            }
        },
        methods: {
            getData() {
                this.conditionData['page'] = 1;
                this.$emit('getData', this.conditionData);
                let array = [];

                for(let index in this.conditionData) {
                    if(defaultSearchParams.indexOf(index) < 0 && this.conditionData[index] !== "") {
                        let map = {
                            field : index,
                            name : "",
                            value : this.conditionData[index]
                        };
                        array.push(map);
                    }
                }
                this.searchData = array;
            },
            resetSearch() {
                for(let index in this.conditionData) {
                    this.conditionData[index] = "";
                }
            },
            advancedSearch() {

            }
        },
        created() {
            for(let o of this.condition) {
                this.$set(this.conditionData, o.field, '');
            }
        }
    }
</script>

<style lang="scss">

    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .c-col{
        margin: 6px auto;
    }

</style>
